<template>
	<view>
		<view class="content">
			<!-- 统计内容 -->
		    <view class="statistics-card">
		        <view class="rate-section">
		            <view class="section-title">{{ title }}</view>
		            <!-- 电气条线 -->
		            <view class="line-group"
						v-for="(item, index) in utilData"
						:key = 'index'>
		                <view class="line-header">
		                    <span>{{ item.lineName }}</span>
		                    <span class="line-rate">{{ item.lineValue }}{{ item.lineUnit }}</span>
		                </view>
		                <view class="area-items">
		                    <view class="area-item"
								v-for="(item1, index1) in item.items"
								:key = 'index1'>
		                        <span class="area-name">{{ item1.name }}</span>
		                        <span class="area-rate">{{ item1.value }}{{ item1.unit }}</span>
		                    </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { timestampFormatDate } from '@/utils/FormatTime.js'
import { post, postForm } from '@/utils/request';
import { getOverviewAndAlerts, getAnomalyTrend } from '@/api/check.js';
	export default {
		name: 'kanbanRatio',
		props: {
			utilData: {
				type: Array,
				default: () => [],
			},
			title: {
				type: String,
				default: '',
			},
			unitValue: {
				type: String,
				default: '',
			},
		},
		
		data() {
			return {
				
			};
		},
		methods: {
			
		},
	};
</script>

<style scoped lang="scss">
	/* 统计内容 */
	.content {
	    margin-bottom: 10px;
	}
	.statistics-card {
	    background: white;
	    border-radius: 12px;
	    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	    overflow: hidden;
	    margin-top: 12px;
	}
	
	/* 投用率区域 */
	.rate-section {
	    padding: 20px;
	}
	
	.section-title {
	    font-size: 17px;
	    font-weight: 600;
	    color: #333;
	    margin-bottom: 20px;
	}
	
	.line-group {
	    margin-bottom: 16px;
	}
	
	.line-group:last-child {
	    margin-bottom: 0;
	}
	
	.line-header {
	    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
	    color: white;
	    font-size: 14px;
	    font-weight: 600;
	    padding: 10px 16px;
	    border-radius: 8px;
	    margin-bottom: 10px;
	    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	
	.line-rate {
	    font-size: 15px;
	    font-weight: 700;
	}
	
	.area-items {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    gap: 6px;
	}
	
	.area-item {
	    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	    border-radius: 8px;
	    padding: 10px 12px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-size: 13px;
	    border: 1px solid #dee2e6;
	    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}
	
	.area-name {
	    font-weight: 500;
	    color: #333;
	}
	
	.area-rate {
	    font-weight: 700;
	    font-size: 13px;
	    color: #1565c0;
	    background: rgba(21, 101, 192, 0.1);
	    padding: 2px 6px;
	    border-radius: 4px;
	    min-width: 40px;
	    text-align: center;
	}
</style>